<template>
	<view>
		<view class="note">
			<view class="note-input">
				<!-- v-model:双向绑定 -->
				<input v-model="msg" class="note-content" placeholder="输入你想做的事情" />
				<button class="note-add" @click="addNote" size="mini">添加</button>
			</view>
			<view class="note-list">
				<view v-if="array.length>0" v-for="(item,index) in array" :key="item.id" class="note-item">
					<checkbox></checkbox>
					<view class="item-text">{{item.title}}</view>
					<button class="note-del" @click="editlNote(item.id)" size="mini">编辑</button>
					<button class="note-del" @click="delNote(item.id)" size="mini">删除</button>
				</view>
				<view v-if="array.length<=0">
					此处还未添加数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array:[{id:'1',title:'复习英语'},
					{id:'2',title:'复习'},
					{id:'3',title:'游戏'}
				],
				msg:''
			}
		},
		methods: {
			addNote() {
				//追加数据
				let time = new Date().getDate()
				this.array = [...this.array,{id:`${time}`,title:this.msg}]
			},
			delNote(id){
				//删除数据
				this.array = this.array.filter(item => {
					return item.id != id  //获取与id值不同的选项
				})
			},
			editlNote(id){
				uni.navigateTo({
					url:`../my/my?id=${id}`
				})
			},
			
		},
		//页面加载完成时的生命周期
		onLoad() {
			
		}
	}
</script>

<style>
/*  */
.note-input{
	/* 弹性布局 */
	display: flex;
	height: 60rpx;
	}

.note-content{
	border: 1rpx solid black;
	flex: 6;
	
}
.note-add{
	flex: 1;
	font-size: 25rpx;
	font-weight: bold;
}

/* 笔记 */
.note-list {
	margin-top: 100rpx;
	padding: 20rpx;
	border: 2rpx solid red;
}
.note-item{
	display: flex;
	/* 盒子阴影 */
	box-shadow: 0 0 5rpx 5rpx gray;
	/* 内边距撑开内容 */
	padding: 10rpx 4rpx;
	/* 设置外边界 */
	margin: 30rpx 0rpx;
}
.item-text {
	flex:1
}


</style>